<template>
  <div class="app">
    <div class="cover"></div>
      <Header></Header>
      <p>{{fullName}} - {{counter}}</p>
      <!-- <p>模块数据A：{{TextA}}</p>
      <p>模块数据B：{{TextB}}</p>
      <p>getters： {{textPlus}}</p> -->
      <!-- <Todu></Todu> -->
      <router-link to="/app">app</router-link>
      <router-link to="/login">login</router-link>
      <transition name="fade">
        <router-view />
      </transition>
      <Footer></Footer>
  </div>
</template>

<script>
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
// import Todu from './views/todo/todo.vue'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {
  metaInfo: {
    title: 'Dennis todo app'
  },
  components: {
    Header,
    Footer
    // Todu
  },
  mounted () {
    // let i = 1
    // actions调用
    this.updateCountAsync({
      num: 5,
      time: 2000
    })
    // this.updateText('123')
    // this['a/updateText']('123') // 命名空间调用方式
    // mutations 使用
    // setInterval(() => {
    //   // this.$store.commit('updateCount', i++)
    //   this.updateCount({
    //     num: i++,
    //     num2: 2
    //   })
    // }, 1000)
  },
  computed: {
    // textA () {
    //   return this.$store.state.a.text
    // },
    // textB () {
    //   return this.$store.state.b.text
    // },
    // ...mapState(['count']),
    ...mapState({
      counter: (state) => state.count,
      TextA: state => state.a.text,
      TextB: state => state.b.text
    }),
    // count () {
    //   return this.$store.state.count
    // },
    // ...mapGetters(['fullName'])
    // ...mapGetters(['fullName', 'a/textPluls'])
    ...mapGetters({
      'fullName': 'fullName',
      textPlus: 'a/textPlus' // getters 中的命名空间写法在模板中不好，所以写成这样
    })
    // fullName () {
    //   return this.$store.getters.fullName
    // }
  },
  methods: {
    ...mapActions(['updateCountAsync']),
    // ...mapMutations(['updateCount', 'updateText'])
    ...mapMutations(['updateCount', 'a/updateText'])// 命名空间调用
  }
}
</script>

<style lang="stylus" scoped>
  .app
    position absolute
    top 0
    left 0
    right 0
    bottom 0
  .cover
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background #999
    opacity .6
    z-index -1
</style>
